<template>
  <div class="i_bg bg_color">
    <div class="i_ban_bg">
      <!--Begin Banner Begin-->
      <div class="banner">
        <div class="top_slide_wrap">
          <ul class="slide_box bxslider"   v-for="(image,index) in imageList" 
            :key="index"  v-show="index === currentIndex"
            @mouseover="handleMouseEnter()" 
            @mouseout="handleMouseLeave()">
            <li>
              <img :src="image" width="740" height="401" />
            </li>
          </ul>
          
         
          <div class="slide_controls">
            <div class="slide_indicators">
              <span  v-for="(image, index) in imageList"  :key="index" :class="{ active: index === currentIndex }"
                @click="switchToImage(index)"></span>
            </div>
          </div>
          
          <div class="op_btns clearfix">
            <a href="#" class="op_btn op_prev" @click.prevent="prevImage"><span></span></a>
            <a href="#" class="op_btn op_next" @click.prevent="nextImage"><span></span></a>
          </div>
        </div>
      </div>

      <!--End Banner End-->
      <div class="inews">
        <div class="news_t">
          <span class="fr"><a href="#" @click.prevent="toManagement()">更多 ></a></span>新闻资讯
        </div>
        <ul>
          <li v-for="item in newsPageInfo.list" :key="item.id"><!-- List<News> -->
            <span>[ 特惠 ]</span>
            <a href="#" @click.prevent="toNewsDetail(item)">{{ item.title }}</a>
          </li>
          <li v-if="newsPageInfo.list && newsPageInfo.list.length === 0">
          暂无数据
          </li>
        </ul>
        <div class="charge_t">
          话费充值
          <div class="ch_t_icon"></div>
        </div>
        <form>
          <table style="width: 205px; margin-top: 10px" cellspacing="0" cellpadding="0">
            <tbody>
              <tr height="35">
                <td width="33">号码</td>
                <td><input type="text" value="" class="c_ipt" /></td>
              </tr>
              <tr height="35">
                <td>面值</td>
                <td>
                  <select class="jj" name="city">
                    <option value="0" selected="selected">100元</option>
                    <option value="1">50元</option>
                    <option value="2">30元</option>
                    <option value="3">20元</option>
                    <option value="4">10元</option>
                  </select>
                  <span style="color: #ff4e00; font-size: 14px">￥99.5</span>
                </td>
              </tr>
              <tr height="35">
                <td colspan="2">
                  <input type="submit" value="立即充值" class="c_btn" />
                </td>
              </tr>
            </tbody>
          </table>
        </form>
      </div>
    </div>
    <!-- 热门 begin -->
    <top-products-vue></top-products-vue>
    <!-- 热门 end -->
    <!-- 限时特卖 begin -->
    <!-- <flash-sales-vue></flash-sales-vue> -->
    <!-- 限时特卖 end -->
    <!-- 楼层商品 begin -->
    <floor-products-vue></floor-products-vue>
    <!-- 楼层商品 end -->
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'// 从vue中导入ref和onMounted函数
import axios from 'axios'// 导入axios库
import { useRouter } from 'vue-router' // 导入路由

import TopProductsVue from '@/components/TopProducts.vue';
// import FlashSalesVue from '@/components/FlashSales.vue';
import FloorProductsVue from '@/components/FloorProducts.vue';

const router = useRouter()// 获取路由实例

// 轮播图相关数据
const currentIndex = ref(0) // 当前显示的图片索引
const slideInterval = ref(null) // 轮播定时器
const isPaused = ref(false) // 是否暂停轮播

//数据
const newsPageInfo = ref({// 创建响应式数据newsPageInfo，用于存储从后端获取的PageInfo<News>对象
  list: [],        // 新闻列表
  pageNum: 1,      // 当前页码
  pageSize: 5,    // 每页大小
  total: 0,        // 总记录数
  pages: 0         // 总页数
})

const imageList = ref([
  '/images/ban1.jpg',
  '/images/bin2.jpeg',
  '/images/bin3.jpg',
])

// 开始自动轮播,3秒切换一张图片
const startAutoPlay = () => {
  if (slideInterval.value) {
    clearInterval(slideInterval.value)
  }
  
  slideInterval.value = setInterval(() => {
    if (!isPaused.value) {
      nextImage()
    }
  }, 3000) 
}

// 下一张图片
const nextImage = () => {
  currentIndex.value = (currentIndex.value + 1) % imageList.value.length
}

// 上一张图片
const prevImage = () => {
  currentIndex.value = (currentIndex.value - 1 + imageList.value.length) % imageList.value.length
}

const handleMouseEnter = () => {
   isPaused.value = true
}
const handleMouseLeave = () => {
  isPaused.value = false
}

// 定义获取新闻数据的异步函数
const fetchNews = async () => {
  try {
    // 使用axios发送POST请求到后端获取新闻数据
    const response = await axios.post('/api/pageNews',{
      pageNum: newsPageInfo.value.pageNum,
      pageSize: newsPageInfo.value.pageSize
    })//PageInfo<News>
    // 将获取到的数据赋值给newsList
    newsPageInfo.value = response.data
  } catch (error) {// 如果请求失败，使用默认数据
    
    console.error('获取数据失败:', error)
  }
}

onMounted(() => {
  fetchNews()
  startAutoPlay() 
})

onUnmounted(() => {
  if (slideInterval.value) {
    clearInterval(slideInterval.value)
  }
})

//资讯列表
function toManagement(){
    router.push('/newsList')
}

//资讯详情
function toNewsDetail(item) {
  router.push({
    name: 'newsDetail',
    query: { 
      title: item.title,
      content: item.content,
      createTime: item.createTime
    }
  })
}

</script>

<style>
.slide_controls {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  text-align: center;
}

.slide_indicators {
  display: inline-block;
}

.slide_indicators span {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  margin: 0 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.slide_indicators span.active {
  background-color: #ff4e00;
}

/* 轮播图按钮样式优化 */
.op_btn {
  background-color: rgba(0, 0, 0, 0.3);
  transition: background-color 0.3s ease;
}

.op_btn:hover {
  background-color: rgba(0, 0, 0, 0.6);
}
</style>